<template>
	<view class="flex-column container">
		<div class="flex-column item">
			<span class="label">旧密码</span>
			<div class="input-box flex-box" :class="{active:focus==='oldPsw'}">
				<input @focus="focus='oldPsw'" @blur="focus=''" type="password" v-model="oldPsw">
			</div>
		</div>
		<div class="flex-column item">
			<span class="label">新密码</span>
			<div class="input-box flex-box" :class="{active:focus==='newPsw'}">
				<input @focus="focus='newPsw'" @blur="focus=''" type="password" v-model="newPsw">
			</div>
		</div>
		<div class="flex-column item">
			<span class="label">确认新密码</span>
			<div class="input-box flex-box" :class="{active:focus==='newPswConfirm'}">
				<input @focus="focus='newPswConfirm'" @blur="focus=''" type="password" v-model="newPswConfirm">
			</div>
		</div>
		<div class="btn" @click="confirm">确认</div>
	</view>
</template>

<script>
	import{request} from '@/utils/http.js'
	
	export default {
		components: {},
		data() {
			return {
				oldPsw: '',
				newPsw: '',
				newPswConfirm: "",
				focus: ''
			}
		},
		methods: {
			confirm() {
				if(this.oldPsw===''){
					uni.showToast({
						icon:'none',
						title: '请输入旧密码',
						duration: 2000
					});
					return
				}
				if(this.newPsw===''){
					uni.showToast({
						icon:'none',
						title: '请输入新密码',
						duration: 2000
					});
					return
				}
				if(this.newPswConfirm===''){
					uni.showToast({
						icon:'none',
						title: '请确认新密码',
						duration: 2000
					});
					return
				}
				const data = {
					newPassword:this.newPsw,
					newPassword1:this.newPswConfirm,
					oldPassword:this.oldPsw
				}
				request('/blade-user/update-password','post',data).then(res=>{
					uni.showToast({
						icon:'success',
						title: '修改成功，请重新登录',
						duration: 2000
					});
					uni.clearStorageSync();
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/login/index'
						})
					})
					
				}).catch(err=>{
					uni.showToast({
						icon:'none',
						title: err,
						duration: 2000
					});
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		padding: 40upx 0;
		box-sizing: border-box;

		.item {
			padding: 20upx 48upx;

			.label {
				color: #333333;
				font-size: 32upx;
				margin-bottom: 22upx;
			}

			.input-box {
				width: 100%;
				height: 97upx;
				border: 1px solid #BFBFBF;
				border-radius: 8px;
				padding: 0 30upx;
				box-sizing: border-box;

				&.active {
					border: 1px solid #478BFF;
				}
			}
		}

		.btn {
			margin: 0 auto;
			margin-top: 300upx;
			width: 500upx;
			height: 88upx;
			background: linear-gradient(69deg, #478BFF 0%, #58BEFF 100%);
			border-radius: 44upx;
			text-align: center;
			line-height: 88upx;
			font-size: 36upx;
			font-weight: bold;
			color: #fff;
		}
	}
</style>